<template>
  <div>
    <div>
      <!--顶部导航栏-->
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1">我的问卷</el-menu-item>
        <el-menu-item index="2">
          <router-link to="/qs_create" style="text-decoration: none"
            >新建问卷</router-link
          >
        </el-menu-item>
      </el-menu>
    </div>
    <!--顶部导航栏结束-->

    <!--问卷列表-->

    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column width="30"> </el-table-column>
      <el-table-column width="100" label="编号" type="index"> </el-table-column>

      <el-table-column prop="title" label="问卷名" width="200">
      </el-table-column>

      <el-table-column prop="finishDate" label="结束时间" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="状态" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.status">
            <el-tag type="success" effect="dark">发布中</el-tag>
          </div>
          <div v-else>
            <el-tag type="info" effect="dark">未发布</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >

          <el-button
            v-if="scope.row.status"
            size="mini"
            @click="handleStop(scope.row.id)"
            type="warning"
            >停止</el-button
          >

          <el-button
            v-if="scope.row.status == false"
            size="mini"
            @click="handleRelease(scope.row.id)"
            type="success"
            >发布</el-button
          >

          <el-button size="mini" type="primary" @click="dataShow(scope.row.id)"
            >统计</el-button
          >

          <el-button
            size="mini"
            type="primary"
            @click="handlePreview(scope.row.id)"
            >预览</el-button
          >

          <el-button
            size="mini"
            type="primary"
            icon="el-icon-share"
            @click="handleShare(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <br />

    <el-pagination
      background
      layout="prev, pager, next"
      page-size="10"
      @current-change="selectPage"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      class="dialog"
    >
      <el-tree
        :props="props"
        :load="loadNode"
        lazy
        show-checkbox
        @check-change="handleCheckChange"
      >
      </el-tree>
      <div style="width: 100%; text-align: right">
        <el-button style="margin-left: 10px" @click="dialogShow = false"
          >取消</el-button
        >
        <el-button type="primary" style="margin-left: 10px" @click="setScope"
          >完成</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="shareTitle"
      :visible.sync="linkShow"
      :close-on-click-modal="false"
      class="dialog"
    >
      <div @click="goLink">
        <el-link type="primary">{{ linkText }}</el-link>
      </div>
      <div style="width: 100%; text-align: right">
        <el-button style="margin-left: 10px" @click="linkShow = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script>
import axios from "axios";
// import element-ui from 'element-ui'
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
      },
      count: 1,
      dialogShow: false,
      shareTitle: "问卷链接",
      dialogTitle: "",
      linkShow: false,
      linkText: "",
      confirmScope: false,
      formId: "",
      tableData: [
        {
          // id: '',
          title: "未连接数据库",
          finishDate: "请检查环境",
          status: true,
        },
      ],
      form: {},
      total: null,
      form_status: "发布",
      dialogFormVisible: false,
      users: [],
    };
  },

  created() {
    //获取问卷列表
    this.getFirstPage();
  },

  methods: {
    getUsers() {
      const _this = this;
      axios.get("http://localhost:8082/user/findAll").then(function (resp) {
        _this.users = resp.data;
        console.log(_this.users);
      });
    },

    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      this.getUsers();
      if (node.level === 0) {
        return resolve([
          {
            name: "中原工学院",
          },
          {
            name: "无限制",
          },
        ]);
      }

      if (node.level > 1) return resolve([]);

      var hasChild;
      if (node.data.name === "中原工学院") {
        hasChild = true;
      } else if (node.data.name === "无限制") {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
        var data;

        if (hasChild) {
          data = [];

          for (let index = 0; index < this.users.length; index++) {
            let user = {};
            user.name = this.users[index].name + " " + this.users[index].id;
            data.push(user);
          }
        } else {
          data = [];
        }

        resolve(data);
      }, 500);
    },

    //获取第一页表格数据
    getFirstPage() {
      const _this = this;
      axios
        .get("http://localhost:8082/userForm/findByPage/1/10")
        .then(function (resp) {
          _this.tableData = resp.data.content;
          _this.total = resp.data.totalElements;
        });
    },

    //查询对应页的数据
    selectPage(currentPage) {
      const _this = this;
      axios
        .get("http://localhost:8082/userForm/findByPage/" + currentPage + "/10")
        .then(function (resp) {
          _this.tableData = resp.data.content;
          _this.total = resp.data.totalElements;
        });
    },

    //编辑问卷
    handleEdit(id) {
      var _this = this;
      axios
        .get("http://localhost:8082/userForm/findById/" + id)
        .then(function (resp) {
          _this.$router.push({
            path: "/qs_create",
            name: "qs_create",
            params: {
              form: resp.data,
              flag: true,
            },
          });
        });
    },
    //预览问卷
    handlePreview(form_id) {
      this.$router.push({
        path: "/preview",
        name: "preview",
        params: {
          id: form_id,
        },
      });
    },

    goLink() {
      window.open(this.linkText);
    },
    //分享问卷
    handleShare(form_id) {
      this.linkShow = true;
      this.linkText = "http://localhost:8080/qs_fill/" + form_id;
    },

    //数据展示
    dataShow(form_id) {
      this.$router.push({
        path: "/dataShow",
        name: "dataShow",
        params: {
          id: form_id,
        },
      });
    },
    //发布问卷确定键
    setScope(form_id) {
      axios
        .put("http://localhost:8082/userForm/releaseOrStop/" + this.formId)
        .then(function (resp) {});
      this.dialogShow = false;
      //刷新界面
      window.location.reload();
    },
    //发布问卷
    handleRelease(form_id) {
      this.dialogTitle = "范围";
      this.dialogShow = true;
      this.formId = form_id;
    },

    //停止发布问卷
    handleStop(form_id) {
      this.$confirm("确定停止发布?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .put("http://localhost:8082/userForm/releaseOrStop/" + form_id)
          .then(function (resp) {
            //刷新界面
            window.location.reload();
          });
      });
    },

    //删除问卷
    handleDelete(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .delete("http://localhost:8082/userForm/deleteById/" + id)
          .then(function (resp) {
            //刷新界面
            window.location.reload();
          });
      });
    },
  },
};
</script>

<style>
</style>
